<template >
  <div>
    <!--条件查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input  v-model="courseQueryVo.courseName" placeholder="课程名称" />
      </el-form-item>
      <el-select v-model="courseQueryVo.coachName" placeholder="请选择课程教练">
        <el-option
          v-for="coach in coachVo"
          :key="coach.name"
          :label="coach.name"
          :value="coach.name">
        </el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click="getList(-1)">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>

      <!--当我们点击添加培训师的按钮时，应该要跳转到 /trainer/add 这个路由地址-->
      <router-link to="/privateCourses/add">
        <el-button type="primary">添加私教</el-button>
      </router-link>
      <router-link to="/privateCourses/timeTable">
        <el-button type="primary">私课课程表</el-button>
      </router-link>
    </el-form>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        width="150"
        align="center"
        prop="img"
        label="课程图片">
        <template slot-scope="scope">
          <img :src="'http://rj0387v46.hn-bkt.clouddn.com/' + scope.row.img" width="140"/>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="courseName"
        label="课程名称"
        width="140">
      </el-table-column>
      <el-table-column
        align="center"
        prop="coachName"
        label="教练"
        width="140">

      </el-table-column>
      <el-table-column
        align="center"
        prop="sort"
        label="排序"
        width="100">
      </el-table-column>
      <el-table-column
        align="center"
        prop="timeLength"
        label="时长"
        width="100">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <router-link :to="'/privateCourses/edit/' + scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
          </router-link>
          <router-link :to="'/privateCourses/schedule/' + scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit">排期</el-button>
          </router-link>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 2, 3, 5]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import privateCourses from "../../api/privateCourses";
import coach from "../../api/coach";
  export default {
    data() {
      return {
        tableData: [],              //表格数据
        currentPage: 1,             //分页页数
        pageSize: 2,                //分页每页条数
        total: 10,                  //数据总数
        courseQueryVo : {},         //条件查询数据
        coachVo : {},               //教练查询数据

      }
    },
    created() {
      this.getList();
      this.getCoach();
    },
    methods: {
      //处理删除
      handleDelete(id){
        this.$confirm("是否确定删除数据？", "提示", {type: 'warning'})
          .then(() => {
            // 表示点击了确定
            console.log("被删除的id：",id)
            privateCourses.deleteCourse(id).then(res => {
              // 此处我要不要考虑失败的情况
              // 弹出成功的提示信息
              this.$message.success(res.message);
              // 重新加载数据
              this.currentPage = 1;
              this.getList();
            });
          })
          .catch(() => {
            // 表示点击了取消
            this.$message.info("取消删除操作");
          });
      },
      //分页查询
      getList(value) {
        if (value == -1){
          // 点击搜索之后应该从第一页开始查询
          this.currentPage = 1;
        }
        console.log("查询数据：",this.courseQueryVo)
        privateCourses.search(this.currentPage, this.pageSize,this.courseQueryVo).then(res => {
          console.log("页面初始化数据为：", res);
          this.tableData = res.data.data;
          this.total = res.data.total;
        })
      },
      //查询教练
      getCoach(){
        coach.queryAll().then(res => {
          console.log("查询教练数据：",res.data);
          this.coachVo = res.data;
        })
      },
      // 每页记录数发生变化
      handleSizeChange(size){
        this.pageSize = size;
        this.getList();
      },
      // 当前页发生变化
      handleCurrentChange(current){
        this.currentPage = current;
        this.getList();
      },

      //清空条件查询表单数据
      resetData(){
        this.courseQueryVo = {};
        this.getList();
      },

    }
  }
</script>
